<template>
  <div id="xiangtwo">
    <div class="xiangtwo2" v-for="item in xiangtwo" :key="item.id">
      <h2>{{ item.name }}</h2>
      <br />
      <p>
        {{ item.icon }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>{{
          item.path
        }}</a>
      </p>

      <br />
      <p class="shouhang">
        {{ item.path2 }}
      </p>
      <br />
      <b class="jiacu">{{ item.path3 }}</b>

      <p class="shouhang">
        {{ item.path4 }}
      </p>

      <div class="xiangtu">
        <img :src="item.img" alt="" />
      </div>

      <p class="shouhang">
        {{ item.path5 }}
      </p>
    </div>
    <br />
    <!-- <div class="xiangtwo2">
      <b class="jiacu">2、道与魔的博弈</b>

      <p class="shouhang">
       
        西南政法大学刑事侦查学院反诈研究团队成员。他们团队梳理电信网络诈骗的演变过程发现，2008年前后,这些师从台湾系的诈骗团伙开始在全国各地蔓延，他们以宗族乡里联结而成，呈现地域性特征，逐渐发展成一张颇具规模的诈骗版图。
      </p>
      <br />
      <p class="shouhang">
        西南政法大学刑事侦查学院反诈研究团队成员谢玲:大陆系的诈骗团伙花样更多，不同的地区形成了当地具有特色的犯罪手法，比如说广西宾阳QQ诈骗，广东电白猜猜我是谁诈骗，江西余干重金求子诈骗。当时全国公安机关就针对这些不同的重点地区，诈骗类型，诈骗团伙进行打击，这一批人后来转移到缅北，现在说实话国内的窝点已经很少了。
      </p>

      <img src="../assets/imgs/xqy05.png" alt="" />

      <p class="shouhang">
        目前，诈骗团伙最突出的聚集地，就是缅甸北部。缅北接壤云南，当地说中文，使用人民币,
        通讯设备甚至不需要国际漫游，直接使用国内三大运营商，种种条件为诈骗团伙建立窝点提了便利。
      </p>
    </div> -->

    <div class="under">
      <div class="under1">
        <div class="topshang">
          <div class="shangtop">
            <img :src="dataForm.img1" alt="" />
            {{ dataForm.name1 }}
          </div>
          <div class="shangtop">{{ dataForm.name2 }}</div>
          <div class="shangtop">{{ dataForm.name3 }}</div>
        </div>
        <div class="bottomxia">
          <img :src="dataForm.img2" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      xiangtwo: [],
      dataForm: {},
    };
  },
  created() {
    this.getxiang();
    this.getdata();
  },
  methods: {
    getxiang() {
      axios({
        url: "http://localhost:3000/xiangtwo",
      }).then((res) => {
        this.xiangtwo = res.data;
      });
    },
    getdata() {
      axios({
        url: "http://localhost:3000/under",
      }).then((res) => {
        this.dataForm = res.data;
        console.log(this.dataForm, "dataForm");
      });
    },
  },
};
</script>

<style>
.shouhang {
  text-indent: 2rem;
}
.jiacu {
  display: inline-block;
  text-indent: 2rem;
}

#xiangtwo img {
  width: 100%;
  height: 15rem;
  margin-top: 15px;
  margin-bottom: 15px;
}

#xiangtwo .under {
  height: 15rem;

  margin-top: 15px;
}
.under1 {
  width: 100%;
  height: 12rem;
  background-color: rgb(39, 39, 236);
  display: flex;
}

.topshang {
  width: 60%;
  height: 12rem;

  display: flex;
  flex-direction: column;
}

#xiangtwo .shangtop {
  width: 100%;
  height: 4rem;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
}

#xiangtwo .shangtop:nth-child(3) {
  width: 60%;
  height: 2rem;
  color: rgb(32, 32, 204);
  background-color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: 3rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#xiangtwo .shangtop img {
  width: 2rem;
  height: 2rem;
  display: flex;
}
.bottomxia {
  width: 40%;
  height: 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#xiangtwo .bottomxia img {
  width: 80%;
  height: 9rem;
}
</style>
